import { Breadcrumb } from '@douyinfe/semi-ui';
import { useHistory } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import { RouteProps } from '@douyinfe/semi-ui/lib/es/breadcrumb';
import { MainViewProps } from '.';

const ContentNavs: React.FC<MainViewProps> = ({ navStore }): JSX.Element | null => {

    const history = useHistory();
    const [navs, setNavs] = useState<RouteProps[]>();

    const { currentNav } = navStore;

    useEffect(() => {
        let newNavs: RouteProps[] | undefined = undefined;
        if (currentNav) {
            newNavs = [];
            if (currentNav.parents && currentNav.parents.length > 0) {
                for (let i = currentNav.parents.length - 1; i >= 0; i --) {
                    const parent = currentNav.parents[i];
                    const route: RouteProps = {};
                    route.name = parent.name;
                    if (parent.url) {
                        route.path = parent.url;
                    }
                    newNavs!.push(route);
                }
            }
            newNavs.push({ name: currentNav.name });
        }
        setNavs(newNavs);
    }, [ currentNav ]);

    return navs && navs.length > 0 ? <Breadcrumb
        style={{
            marginBottom: '24px',
        }}
    > 
        {navs.map(route => {
            return <Breadcrumb.Item key={route.name} noLink={!route.path} onClick={() => {
                if (route.path) {
                    history.push(route.path);
                }
            }} >{route.name}</Breadcrumb.Item>;
        })}
    </Breadcrumb>: null;
};

export default ContentNavs;
